<script lang="ts">
import {
    defineComponent,
    reactive,
    ref,
    onMounted,
    computed,
    watch,
} from "vue";
import { getAnnouncementList } from "@/api";
import { AppModule } from "@/store/modules/app";

export default defineComponent({
    setup() {
        const open = ref(false);
        const setat = reactive({
            pageNum: 0,
            pageSize: 20,
            languageId: 0,
        });
        const refreshing = ref(false);
        const loading = ref(true);
        const finished = ref(false);
        const list = ref([]);
        const onLoad = async () => {
            const res = await getAnnouncementList(setat);
            if (refreshing.value) {
                list.value = [];
                refreshing.value = false;
            }
            list.value = list.value.concat(
                res.data.data.AnnouncementList || []
            );
            loading.value = false;
            setat.pageNum++;
            if (list.value.length >= res.data.data.Total) {
                finished.value = true;
            }
        };
        const onRefresh = () => {
            switch (AppModule.language) {
                case "en":
                    setat.languageId = 0;
                    break;

                case "zh":
                    setat.languageId = 1;
                    break;

                case "tw":
                    setat.languageId = 2;
                    break;

                case "ko":
                    setat.languageId = 3;
                    break;

                case "ja":
                    setat.languageId = 4;
                    break;

                case "th":
                    setat.languageId = 5;
                    break;

                case "ar":
                    setat.languageId = 6;
                    break;
                default:
                    break;
            }
            open.value = true;
            setat.pageNum = 0;
            finished.value = false;
            loading.value = true;
            refreshing.value = true;
            onLoad();
        };

        const removeHtmlStyle = (html: any) => {
            let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g; //去除样式
            let relTag = /<.+?>/g; //去除标签
            let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g; // 清除类名
            let newHtml = "";
            if (html) {
                newHtml = html.replace(relStyle, "");
                newHtml = html.replace(relTag, "");
            }
            return newHtml;
        };

        watch(
            () => AppModule.language,
            (newLanguage: string) => {
                if (newLanguage) {
                    onRefresh();
                }
            },
            { immediate: true }
        );
        return {
            open,
            list,
            refreshing,
            loading,
            finished,
            onLoad,
            onRefresh,
            removeHtmlStyle,
        };
    },
});
</script>
<template>
    <div class="page">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('layout.noMore')" @load="onLoad">
                <ul>
                    <li v-for="(item, index) in list" :key="index">
                        <div class="bg" @click="$refs.announcementRefs.show(item)">
                            <div class="name-block">
                                <div class="name van-ellipsis">
                                    {{ item.Title }}
                                </div>
                                <van-icon name="arrow" />
                            </div>
                            <div class="content-block">
                                <div class="content van-multi-ellipsis--l2" v-html="removeHtmlStyle(item.Content)"></div>
                                <div class="more">
                                    {{ item.UpdatedAt }}
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </van-list>
        </van-pull-refresh>
    </div>
    <announcement ref="announcementRefs" />
</template>
<style lang="less" scoped>
.page {
    padding: 15px;
    .title {
        font-size: 16px;
        line-height: 40px;
        text-align: center;
    }

    ul {
        li {
            position: relative;
            margin-bottom: 15px;
            font-size: 12px;
            overflow: hidden;
            padding: 15px;
            margin: 0 auto 15px auto;
            background: #222328;
            border-radius: 12px;
            .bg {
                position: relative;
                display: block;
                color: #ffffff;
                border-radius: 5px;
                z-index: 1;

                .name-block {
                    padding-bottom: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-bottom: 1px dashed rgba(56, 56, 56, 1);

                    .name {
                        line-height: 1;
                        font-weight: 500;
                        font-size: 15px;
                        color: #ffffff;
                        overflow: hidden;
                    }
                    .van-icon {
                        font-size: 15px;
                        color: #fff;
                        opacity: 0.5;
                    }
                }

                .content-block {
                    margin-top: 16px;
                }

                .content {
                    overflow: hidden;
                    font-size: 13px;
                    color: #ffffff;
                    line-height: 20px;
                }

                .more {
                    margin-top: 9px;
                    display: flex;
                    justify-content: space-between;
                    font-weight: 400;
                    font-size: 13px;
                    color: #ffffff;
                    opacity: 0.5;
                }
            }
        }
    }
}
</style>